<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>废品回收 - 下单页面预览</title>
  <style>
    body {
      margin: 0;
      padding: 20px;
      background: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    
    .preview-container {
      max-width: 375px;
      margin: 0 auto;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .page {
      width: 375px;
      height: 812px;
      background: #F2F7F9;
      position: relative;
      overflow: hidden;
    }

    /* 状态栏 */
    .status-bar {
      width: 100%;
      height: 44px;
      background: #FFFFFF;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;
    }
    
    .status-time {
      font-family: 'PingFang SC';
      font-weight: 600;
      font-size: 15px;
      line-height: 21px;
      color: #000000;
    }
    
    .status-right {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .signal-wifi {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .cellular-bars {
      display: flex;
      align-items: flex-end;
      gap: 1px;
    }
    
    .bar {
      background: #000000;
    }
    
    .bar1 { width: 3px; height: 4px; }
    .bar2 { width: 3px; height: 6px; }
    .bar3 { width: 3px; height: 8px; }
    .bar4 { width: 3px; height: 10px; }
    
    .wifi-icon {
      position: relative;
      width: 15px;
      height: 11px;
    }
    
    .wifi-arc {
      position: absolute;
      border: 1px solid #000000;
      border-bottom: none;
      border-radius: 15px 15px 0 0;
    }
    
    .wifi-arc1 { width: 4px; height: 3px; bottom: 0; left: 0; }
    .wifi-arc2 { width: 9px; height: 6px; bottom: 0; left: -2px; }
    .wifi-arc3 { width: 14px; height: 9px; bottom: 0; left: -4px; }
    
    .wifi-dot {
      position: absolute;
      width: 2px;
      height: 2px;
      background: #000000;
      border-radius: 50%;
      bottom: 1px;
      left: 1px;
    }
    
    .battery-icon {
      position: relative;
      width: 24px;
      height: 12px;
    }
    
    .battery-body {
      width: 22px;
      height: 11px;
      border: 1px solid #000000;
      border-radius: 2px;
      background: #000000;
      opacity: 0.35;
    }
    
    .battery-tip {
      position: absolute;
      right: -1px;
      top: 4px;
      width: 1px;
      height: 4px;
      background: #000000;
      opacity: 0.4;
    }

    /* 渐变背景 */
    .gradient-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 320px;
      background: linear-gradient(180deg, #3ED09F 0%, #48C5A8 18%, #2FCCAC 36%, #3CD7B0 79%);
      z-index: -1;
    }

    /* 头部区域 */
    .header-section {
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
    
    .city-selector {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .city-name {
      font-family: 'PingFang SC';
      font-weight: 600;
      font-size: 14px;
      line-height: 20px;
      color: #FFFFFF;
    }
    
    .location-icon {
      position: relative;
      width: 8px;
      height: 8px;
    }
    
    .location-dot {
      position: absolute;
      width: 7px;
      height: 5px;
      background: #FFFFFF;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      top: 1px;
      left: 0.4px;
    }
    
    .location-circle {
      position: absolute;
      width: 8px;
      height: 8px;
      border: 1px solid #FFFFFF;
      border-radius: 50%;
      top: 0;
      left: 0;
    }
    
    .logo-text {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 16px;
      color: #FFFFFF;
    }

    /* 地址输入框 */
    .address-input-container {
      margin: 0 20px 20px;
    }
    
    .address-input {
      background: #FFFFFF;
      border-radius: 8px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .recycle-icon {
      width: 20px;
      height: 20px;
      background: #608DFF;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .recycle-text {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 12px;
      color: #FFFFFF;
    }
    
    .input-placeholder {
      flex: 1;
      font-family: 'PingFang SC';
      font-weight: 600;
      font-size: 16px;
      color: #9A9A9A;
    }
    
    .address-arrow {
      color: #CBCBCB;
      font-size: 12px;
    }

    /* 服务特色 */
    .service-features {
      display: flex;
      justify-content: space-around;
      margin: 0 20px 20px;
    }
    
    .feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    
    .feature-icon {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .checkmark {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #9A9A9A;
      position: relative;
    }
    
    .checkmark::after {
      content: '';
      position: absolute;
      width: 4px;
      height: 2px;
      border-left: 1.5px solid #FFFFFF;
      border-bottom: 1.5px solid #FFFFFF;
      transform: rotate(-45deg);
      top: 50%;
      left: 50%;
      margin-top: -2px;
      margin-left: -2px;
    }
    
    .feature-text {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 11px;
      color: #9A9A9A;
    }

    /* 下单方式切换 */
    .order-type-switch {
      position: relative;
      margin: 0 85px 20px;
      height: 50px;
      background: #F2F7F9;
      border-radius: 0;
      display: flex;
    }
    
    .switch-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      cursor: pointer;
    }
    
    .switch-text {
      font-family: 'PingFang SC';
      font-weight: 500;
      font-size: 16px;
      color: #333333;
    }
    
    .switch-item.active .switch-text {
      color: #656565;
    }
    
    .switch-indicator {
      position: absolute;
      bottom: 4px;
      left: 0;
      width: 72px;
      height: 6px;
      background: linear-gradient(90deg, #48C5A8 0%, rgba(72, 197, 168, 0) 100%);
      border-radius: 3px;
      transition: left 0.3s ease;
    }
    
    .switch-indicator.to-store {
      left: 95px;
    }

    /* 表单容器 */
    .form-container {
      background: #FFFFFF;
      border-radius: 12px;
      margin: 0 14px;
      padding: 30px;
    }
    
    .form-section {
      margin-bottom: 30px;
    }
    
    .section-title {
      font-family: 'PingFang SC';
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      margin-bottom: 16px;
      display: block;
    }
    
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }
    
    .section-placeholder {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 14px;
      color: #9A9A9A;
    }
    
    .arrow-right {
      width: 8px;
      height: 12px;
      background: #9A9A9A;
      clip-path: polygon(0 20%, 100% 50%, 0 80%);
    }
    
    .divider {
      width: 100%;
      height: 1px;
      background: #F6F6F6;
      margin-bottom: 16px;
    }
    
    /* 回收类型 */
    .recycle-types {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    
    .type-item {
      height: 48px;
      border: 1px solid #DADADA;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    
    .type-item.selected {
      background: #48C5A8;
      border-color: #48C5A8;
    }
    
    .type-name {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      margin-bottom: 2px;
    }
    
    .type-name.selected {
      color: #FFFFFF;
    }
    
    .type-price {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 11px;
      color: #9A9A9A;
    }
    
    .type-price.selected {
      color: #FFFFFF;
    }
    
    /* 图片上传 */
    .image-upload-area {
      display: flex;
      gap: 10px;
    }
    
    .uploaded-image {
      width: 98px;
      height: 94px;
      border-radius: 6px;
      overflow: hidden;
      position: relative;
    }
    
    .sample-image {
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                  linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                  linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                  linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
      background-size: 16px 16px;
      background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
      position: relative;
    }
    
    .sample-image::after {
      content: '图片';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #999;
      font-size: 12px;
    }
    
    .upload-placeholder {
      width: 98px;
      height: 94px;
      border: 1px dashed #DADADA;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    
    .upload-icon {
      font-size: 24px;
      color: #CBCBCB;
      font-weight: 300;
    }
    
    /* 描述输入框 */
    .description-input {
      width: 100%;
      height: 110px;
      background: #F2F7F9;
      border-radius: 6px;
      padding: 12px;
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 14px;
      color: #9A9A9A;
      border: none;
      outline: none;
      resize: none;
      box-sizing: border-box;
    }
    
    .description-input::placeholder {
      color: #9A9A9A;
    }

    /* 底部导航 */
    .bottom-nav {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 83px;
      background: #FFFFFF;
      box-shadow: 0px -0.5px 0px 0px rgba(0, 0, 0, 0.08);
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
      padding-top: 8px;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      cursor: pointer;
    }
    
    .nav-icon {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    
    .nav-order-active {
      background: linear-gradient(137deg, #A1F0DE 0%, #53CDB1 100%);
      border-radius: 0px;
    }
    
    .order-icon {
      width: 8px;
      height: 9px;
      background: #333333;
    }
    
    .orders-icon {
      width: 18px;
      height: 22px;
      border: 1.5px solid #9A9A9A;
      border-radius: 2px;
      position: relative;
    }
    
    .orders-icon::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 1.5px;
      background: #9A9A9A;
      top: 8px;
      left: 4px;
    }
    
    .orders-icon::before {
      content: '';
      position: absolute;
      width: 10px;
      height: 1.5px;
      background: #9A9A9A;
      top: 12px;
      left: 4px;
    }
    
    .profile-icon {
      width: 12px;
      height: 12px;
      border: 1.5px solid #9A9A9A;
      border-radius: 50%;
      position: relative;
    }
    
    .profile-icon::after {
      content: '';
      position: absolute;
      width: 22px;
      height: 10px;
      border: 1.5px solid #9A9A9A;
      border-top: none;
      border-radius: 0 0 50% 50%;
      top: 14px;
      left: -6px;
    }
    
    .nav-text {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 10px;
      color: #9A9A9A;
    }
    
    .nav-text.active {
      font-weight: 500;
      color: #333333;
    }
    
    .home-indicator {
      position: absolute;
      bottom: 21px;
      left: 50%;
      transform: translateX(-50%);
      width: 134px;
      height: 5px;
      background: #000000;
      border-radius: 100px;
    }
    
    .preview-info {
      padding: 20px;
      background: white;
      margin-top: 20px;
      border-radius: 8px;
    }
    
    .preview-info h3 {
      margin: 0 0 10px 0;
      color: #333;
      font-size: 18px;
    }
    
    .preview-info p {
      margin: 5px 0;
      color: #666;
      font-size: 14px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <div class="preview-container">
    <div class="page">
      <!-- 顶部状态栏 -->
      <div class="status-bar">
        <div class="status-time">8:59</div>
        <div class="status-right">
          <div class="signal-wifi">
            <div class="cellular-bars">
              <div class="bar bar1"></div>
              <div class="bar bar2"></div>
              <div class="bar bar3"></div>
              <div class="bar bar4"></div>
            </div>
            <div class="wifi-icon">
              <div class="wifi-arc wifi-arc1"></div>
              <div class="wifi-arc wifi-arc2"></div>
              <div class="wifi-arc wifi-arc3"></div>
              <div class="wifi-dot"></div>
            </div>
          </div>
          <div class="battery-icon">
            <div class="battery-body"></div>
            <div class="battery-tip"></div>
          </div>
        </div>
      </div>

      <!-- 渐变背景 -->
      <div class="gradient-bg"></div>

      <!-- 城市选择 -->
      <div class="header-section">
        <div class="city-selector">
          <div class="city-name">重庆市</div>
          <div class="location-icon">
            <div class="location-dot"></div>
            <div class="location-circle"></div>
          </div>
        </div>
        
        <!-- Logo -->
        <div class="logo-container">
          <div class="logo-text">回收易</div>
        </div>
      </div>

      <!-- 地址输入框 -->
      <div class="address-input-container">
        <div class="address-input">
          <div class="recycle-icon">
            <div class="recycle-text">收</div>
          </div>
          <div class="input-placeholder">请填写回收地址/电话</div>
          <div class="address-arrow">
            <div>></div>
          </div>
        </div>
      </div>

      <!-- 服务特色 -->
      <div class="service-features">
        <div class="feature-item">
          <div class="feature-icon">
            <div class="checkmark"></div>
          </div>
          <div class="feature-text">公正保障</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <div class="checkmark"></div>
          </div>
          <div class="feature-text">支持开发票</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <div class="checkmark"></div>
          </div>
          <div class="feature-text">24小时下单</div>
        </div>
      </div>

      <!-- 下单方式切换 -->
      <div class="order-type-switch">
        <div class="switch-item active">
          <div class="switch-text">预约上门</div>
        </div>
        <div class="switch-item">
          <div class="switch-text">到店回收</div>
        </div>
        <div class="switch-indicator"></div>
      </div>

      <!-- 表单内容 -->
      <div class="form-container">
        <!-- 废品类型 -->
        <div class="form-section">
          <div class="section-title">*废品类型（多选）</div>
          <div class="divider"></div>
          <div class="recycle-types">
            <div class="type-item">
              <div class="type-name">纸类</div>
              <div class="type-price">1.5元/公斤</div>
            </div>
            <div class="type-item">
              <div class="type-name">金属类</div>
              <div class="type-price">1.5元/公斤</div>
            </div>
            <div class="type-item selected">
              <div class="type-name selected">电子产品</div>
              <div class="type-price selected">2.2元/公斤</div>
            </div>
            <div class="type-item">
              <div class="type-name">玻璃类</div>
              <div class="type-price">2.2元/公斤</div>
            </div>
            <div class="type-item">
              <div class="type-name">塑料类</div>
              <div class="type-price">0.4元/公斤</div>
            </div>
          </div>
        </div>

        <!-- 期望上门时间 -->
        <div class="form-section">
          <div class="section-header">
            <div class="section-title">*期望上门时间</div>
            <div class="section-placeholder">上门回收时间</div>
            <div class="arrow-right"></div>
          </div>
          <div class="divider"></div>
        </div>

        <!-- 预计总量 -->
        <div class="form-section">
          <div class="section-header">
            <div class="section-title">*预计总量</div>
            <div class="section-placeholder">请选择重量</div>
            <div class="arrow-right"></div>
          </div>
          <div class="divider"></div>
        </div>

        <!-- 上传废品图 -->
        <div class="form-section">
          <div class="section-title">*上传废品图（1/3）</div>
          <div class="image-upload-area">
            <div class="uploaded-image">
              <div class="sample-image"></div>
            </div>
            <div class="upload-placeholder">
              <div class="upload-icon">+</div>
            </div>
          </div>
        </div>

        <!-- 废品描述 -->
        <div class="form-section">
          <div class="section-title">*废品描述</div>
          <div class="divider"></div>
          <textarea class="description-input" placeholder="请描写废品详情"></textarea>
        </div>
      </div>

      <!-- 底部导航 -->
      <div class="bottom-nav">
        <div class="nav-item active">
          <div class="nav-icon nav-order-active">
            <div class="order-icon"></div>
          </div>
          <div class="nav-text active">下单</div>
        </div>
        <div class="nav-item">
          <div class="nav-icon">
            <div class="orders-icon"></div>
          </div>
          <div class="nav-text">订单</div>
        </div>
        <div class="nav-item">
          <div class="nav-icon">
            <div class="profile-icon"></div>
          </div>
          <div class="nav-text">我的</div>
        </div>
        <!-- Home Indicator -->
        <div class="home-indicator"></div>
      </div>
    </div>
  </div>

  <div class="preview-info">
    <h3>页面说明</h3>
    <p>✅ 已完成 1:1 还原Figma设计稿</p>
    <p>📱 页面尺寸：375px × 812px (iPhone X/11/12 标准尺寸)</p>
    <p>🎨 颜色方案：严格按照设计稿配色</p>
    <p>📋 功能包含：</p>
    <p>• 顶部状态栏（时间、信号、WiFi、电池）</p>
    <p>• 城市选择和Logo展示</p>
    <p>• 地址输入框和服务保障</p>
    <p>• 上门/到店切换</p>
    <p>• 废品类型选择（默认选中电子产品）</p>
    <p>• 时间和重量选择器</p>
    <p>• 图片上传区域</p>
    <p>• 废品描述输入</p>
    <p>• 底部三页导航（当前为下单页）</p>
    <p>🔧 技术栈：uni-app + Vue 3 + SCSS</p>
  </div>
  
  <script>
    // 添加简单的交互功能
    document.addEventListener('DOMContentLoaded', function() {
      // 废品类型选择
      const typeItems = document.querySelectorAll('.type-item');
      typeItems.forEach(item => {
        item.addEventListener('click', function() {
          this.classList.toggle('selected');
          const typeName = this.querySelector('.type-name');
          const typePrice = this.querySelector('.type-price');
          if (this.classList.contains('selected')) {
            typeName.classList.add('selected');
            typePrice.classList.add('selected');
          } else {
            typeName.classList.remove('selected');
            typePrice.classList.remove('selected');
          }
        });
      });

      // 上门/到店切换
      const switchItems = document.querySelectorAll('.switch-item');
      const indicator = document.querySelector('.switch-indicator');
      switchItems.forEach((item, index) => {
        item.addEventListener('click', function() {
          switchItems.forEach(si => si.classList.remove('active'));
          this.classList.add('active');
          if (index === 1) {
            indicator.classList.add('to-store');
          } else {
            indicator.classList.remove('to-store');
          }
        });
      });

      // 图片上传点击
      const uploadPlaceholder = document.querySelector('.upload-placeholder');
      uploadPlaceholder.addEventListener('click', function() {
        alert('点击了图片上传按钮');
      });
    });
  </script>
</body>
</html>